<template>
  <div class="app-container">
    <div class="filter-container">
      <el-cascader
          class="filter-item"
          v-model="selectParent" :options="distributorsList"
          :props="distributorsProps"
          placeholder="所属经销商"
          @change="getList"
          style="width: 15%" clearable filterable></el-cascader>

      <!--      <el-cascader v-model="selectAreas":options="options" :props="selectCityProps" class="filter-item"-->
      <!--                   placeholder="按省市区筛选" @change="getList" style="width: 15%;margin-left: 5px" clearable filterable></el-cascader>-->

      <el-input
          class="filter-item"
          placeholder="输入关键字进行过滤"
          v-model="listQuery.keyword"
          style="width: 12%;margin-left: 5px"
          @keyup.enter.native="getList"
      >
      </el-input>
      <el-input
          class="filter-item"
          placeholder="设备大于"
          v-model="listQuery.big"
          style="width:8%;margin-left: 5px"
          @keyup.enter.native="getList"
      >
      </el-input>
      <el-input
          class="filter-item"
          placeholder="设备小于"
          v-model="listQuery.less"
          style="width: 8%;margin-left: 5px"
          @keyup.enter.native="getList"
      >
      </el-input>
      <!--      <el-input v-model="listQuery.title" placeholder="Title" style="width: 200px;" class="filter-item"-->
      <!--                @keyup.enter.native="handleFilter"-->
      <!--      />-->
      <!--      <el-select v-model="listQuery.importance" placeholder="Imp" clearable style="width: 90px" class="filter-item">-->
      <!--        <el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item" />-->
      <!--      </el-select>-->
      <!--      <el-select v-model="listQuery.type" placeholder="Type" clearable class="filter-item" style="width: 130px">-->
      <!--        <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name+'('+item.key+')'" :value="item.key" />-->
      <!--      </el-select>-->
      <!--      <el-select v-model="listQuery.sort" style="width: 140px" class="filter-item" @change="handleFilter">-->
      <!--        <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />-->
      <!--      </el-select>-->
      <el-radio-group v-model="listQuery.is_active" style="margin-left: 5px" class="filter-item" @change="getList">
        <el-radio-button label="">全部</el-radio-button>
        <el-radio-button :label="1">正常</el-radio-button>
        <el-radio-button :label="0">冻结</el-radio-button>
      </el-radio-group>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getList"
                 style="margin-left: 10px"
      >
        搜索
      </el-button>

      <el-button class="filter-item" type="success" icon="el-icon-search" @click="updateDevice"
                 style="margin-left: 10px"
      >
        更新设备数量
      </el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit"
                 @click="handleCreate"
      >
        添加
      </el-button>
      <el-radio-group v-if="info.show_drawer == 1" v-model="listQuery.draw_active" style="margin-right: 5px;float:right"
                      class="filter-item" @change="getList">
        <el-radio label="">全部</el-radio>
        <el-radio :label="0">正常</el-radio>
        <el-radio :label="1">异常</el-radio>
      </el-radio-group>
      <!--      <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download"-->
      <!--                 @click="handleDownload"-->
      <!--      >-->
      <!--        导出-->
      <!--      </el-button>-->
      <!--      <el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">-->
      <!--        审核-->
      <!--      </el-checkbox>-->
    </div>
    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
      <el-table-column align="center" label="ID" min-width="30">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="40" align="center" label="头像">
        <template slot-scope="scope">
          <el-avatar shape="square" fit="fit" :src="scope.row.avatar"></el-avatar>
          <!--          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>-->
        </template>
      </el-table-column>
      <el-table-column min-width="80" align="center" label="经销商">
        <template slot-scope="scope">
          <el-link v-if="scope.row.level == 1" type="primary">{{ scope.row.name }}</el-link>
          <el-link v-else-if="scope.row.level == 2" type="success">{{ scope.row.name }}</el-link>
          <el-link v-else type="warning">{{ scope.row.name }}</el-link>
          <!--          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>-->
        </template>
      </el-table-column>
      <el-table-column min-width="50" align="center" label="层级">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.level == 1" type="primary">一级</el-tag>
          <el-tag v-else-if="scope.row.level == 2" type="success">二级</el-tag>
          <el-tag v-else type="warning">三级</el-tag>
          <!--          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>-->
        </template>
      </el-table-column>
      <el-table-column min-width="60" align="center" label="负责人">
        <template slot-scope="scope">
          <span>{{ scope.row.owner_name }}</span>
          <!--          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>-->
        </template>
      </el-table-column>


      <el-table-column min-width="60" align="center" label="负责人电话">
        <template slot-scope="scope">
          <span>{{ scope.row.phone }}</span>
          <!--          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>-->
        </template>
      </el-table-column>

      <el-table-column min-width="50" align="center" label="分润">
        <template slot-scope="scope">
          <span>{{ scope.row.rate }}%</span>
          <!--          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>-->
        </template>
      </el-table-column>

      <el-table-column min-width="80" align="center" label="客服">
        <template slot-scope="scope">
          <span>{{ scope.row.customer_service_phone }}</span>
          <!--          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>-->
        </template>
      </el-table-column>
      <el-table-column min-width="100" align="center" label="详细地址">
        <template slot-scope="scope">
          <span>{{ scope.row.address }}</span>
          <!--          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>-->
        </template>
      </el-table-column>
      <el-table-column min-width="40" align="center" label="设备数">
        <template slot-scope="scope">
          <router-link :to="'/device/list?distributor_id='+scope.row.id" class="link-type">
            <el-link type="primary">{{ scope.row.device_count }}</el-link>
          </router-link>
          <!--          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>-->
        </template>
      </el-table-column>

      <el-table-column min-width="40" align="center" label="订单数">
        <template slot-scope="scope">
          <router-link :to="'/order/device?distributor_id='+scope.row.id" class="link-type">
            <el-link type="primary">{{ scope.row.order_count }}</el-link>
          </router-link>
          <!--          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>-->
        </template>
      </el-table-column>
      <el-table-column min-width="40" align="center" label="异常数" v-if="info.show_drawer == 1">
        <template slot-scope="scope">
          <el-link type="error">{{ scope.row.draw_count }}</el-link>
          <!--          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>-->
        </template>
      </el-table-column>
      <el-table-column min-width="50" align="center" label="账户余额">
        <template slot-scope="scope">

          {{ scope.row.balance }}
          <!--          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>-->
        </template>
      </el-table-column>
      <el-table-column min-width="50" align="center" label="累计收益">
        <template slot-scope="scope">
          {{ scope.row.distributor_profit }}
          <!--          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>-->
        </template>
      </el-table-column>
      <el-table-column min-width="40" align="center" label="状态">
        <template slot-scope="scope">
          <el-switch
              v-model="scope.row.is_active"
              :active-value="1"
              :inactive-value="0"
              @change="changeStatus($event,scope.row.id)"

          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column min-width="50" align="center" label="账户详情">
        <template slot-scope="scope">

          <el-button type="success" size="mini" @click="getBankInfo(scope.row)">查看</el-button>
          <!--          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>-->
        </template>
      </el-table-column>
      <el-table-column min-width="60" align="center" label="创建时间">
        <template slot-scope="scope">
          <span>{{ scope.row.created_at }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="30">
        <template slot-scope="scope">
          <el-button type="primary" size="small" icon="el-icon-edit" circle @click="handleUpdate(scope.row)">
          </el-button>
          <!--          <el-button type="danger" size="small" icon="el-icon-delete" circle @click="del(scope.row.id)">-->
          <!--          </el-button>-->
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
                @pagination="getList"
    />
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px"
               style="width: 90%; margin-left:5%;"
      >
        <center>
          <pan-thumb :image="temp.avatar"/>
          <image-cropper
              v-show="imagecropperShow"
              :key="imagecropperKey"
              :width="200"
              :height="200"
              url="/api/upload/base_image"
              lang-type="zh"
              @close="close"
              @crop-upload-success="cropSuccess"
          />
        </center>
        <el-divider>
          <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">
            上传头像
          </el-button>
        </el-divider>
        <br/>
        <el-form-item label="上级经销商">
          <el-cascader v-model="temp.parent_id" ref="cascaderDistributors" :options="distributorsList"
                       :props="distributorsProps"
                       placeholder="不选择则为一级"
                       @change="handleDistributorsChange"
                       :disabled="dialogStatus=='update'?true:false"
                       style="width: 80%" clearable></el-cascader>
        </el-form-item>
        <!--        <el-form-item label="省市区">-->
        <!--          <el-cascader v-model="temp.areas" ref="cascaderAddr" :options="options" :props="cityProps"-->
        <!--                       placeholder="请选择省市区" @change="handleAddrChange" style="width: 80%"></el-cascader>-->
        <!--        </el-form-item>-->
        <el-form-item label="详细地址">
          <el-input v-model="temp.address" style="width: 80%"/>
        </el-form-item>
        <el-form-item label="提现设置">
          <el-radio-group v-model="temp.settlement_type" size="small">
            <el-radio-button label="now">手动提现</el-radio-button>
            <el-radio-button label="no">不可提现</el-radio-button>
            <el-radio-button label="one_day">次日自动提现</el-radio-button>
            <el-radio-button label="seven_day">按周自动提现</el-radio-button>
            <el-radio-button label="monthly">按月自动提现</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item style="margin-bottom: 20px;" label="简介">
          <el-input v-model="temp.introduction" :rows="1" type="textarea" class="article-textarea" autosize
                    placeholder="请输入内容"
          />
          <!--          <span v-show="contentShortLength" style="margin-left:10px" class="word-counter">{{ contentShortLength }}字</span>-->
        </el-form-item>
        <el-row :gutter="32">
          <el-col :xs="24" :sm="24" :lg="13">
            <el-card>
              <el-divider><font color="#ccc" size="2">基础信息</font></el-divider>
              <el-form-item label="经销商名称" prop="name">
                <el-input v-model="temp.name"/>
              </el-form-item>
              <el-form-item label="负责人" prop="owner_name">
                <el-input v-model="temp.owner_name"/>
              </el-form-item>
              <el-form-item label="负责人电话" prop="phone">
                <el-input v-model="temp.phone"/>
              </el-form-item>
              <el-form-item label="密码设置">
                <el-input v-model="temp.password" type="password"/>
              </el-form-item>
              <el-form-item label="客服电话">
                <el-input v-model="temp.customer_service_phone"/>
              </el-form-item>
            </el-card>
          </el-col>


          <el-col :xs="24" :sm="24" :lg="11">
            <el-card>
              <el-divider><font color="#ccc" size="2">设置信息</font></el-divider>
              <el-form-item label="分成比例" style="float:left;margin-top:37px">
                <el-progress type="dashboard" :percentage="temp.rate" :color="colors"></el-progress>
                <div>
                  <el-button-group style="float:left;margin-top:-17px;margin-left:6px">
                    <el-button icon="el-icon-minus" @click="decrease"></el-button>
                    <el-button icon="el-icon-plus" @click="increase"></el-button>
                  </el-button-group>
                </div>
              </el-form-item>
              <el-form-item label="状态" style="float:left;margin-top:37px">
                <el-switch
                    v-model="temp.is_active"
                    :active-value="1"
                    :inactive-value="0"
                    active-text="开启"
                    inactive-text="关闭">
                </el-switch>
              </el-form-item>
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="13">
            <el-card style="margin-top:10px">
              <el-form-item label="客服二维码" prop="image">
                <el-upload
                    class="avatar-uploader"
                    action="/api/upload/base_image"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                  <el-image style="border-radius: 0%;" v-if="imageUrl"
                            :src="imageUrl+'?rondom='+ Math.ceil(Math.random()*5)" class="avatar" width="100%"
                            fit="contain"></el-image>
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="11">
            <el-card style="margin-top:10px" v-if="info.show_drawer == 1">
              <el-divider>延时设置</el-divider>
              <el-form-item label="是否延时" style="margin-top:50px" v-if="info.show_drawer == 1">
                <el-switch
                    v-model="temp.draw_active"
                    :active-value="1"
                    :inactive-value="0"
                    active-text="开启"
                    inactive-text="关闭">
                </el-switch>
              </el-form-item>

              <el-form-item label="延时间隔" style="margin-top:10px;" v-if="info.roles_id<=0">
                <el-input type="number" v-model="temp.draw_space"></el-input>
              </el-form-item>

              <el-form-item label="备注" style="margin-top:10px;" v-if="info.roles_id<=0">
                <el-input v-model="temp.remark"></el-input>
              </el-form-item>
            </el-card>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <center>
          <el-button @click="resetForm">
            取消
          </el-button>
          <el-button type="primary" @click="dialogStatus==='create'?createData():createData()">
            提交
          </el-button>
        </center>
      </div>
    </el-dialog>


    <el-drawer
        :title="nowBank.now_name"
        :visible.sync="bankVisible"
        width="60%"
    >
      <el-descriptions title="个人" direction="vertical" :column="4" border v-if="nowBank.settle_account_id">
        <el-descriptions-item label="姓名">{{ nowBank.withdraw_account_bank_card_username }}</el-descriptions-item>
        <el-descriptions-item label="银行名称">{{ nowBank.withdraw_account_bank_name }}</el-descriptions-item>
        <el-descriptions-item label="卡号" :span="2">{{ nowBank.withdraw_account_bank_card_no }}</el-descriptions-item>
        <el-descriptions-item label="身份证">
          <el-tag size="small">{{ nowBank.cert_id }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="汇付结算账户id">{{ nowBank.settle_account_id }}</el-descriptions-item>
      </el-descriptions>
      <el-divider></el-divider>
      <el-descriptions title="企业基本信息" direction="vertical" :column="4" border v-if="nowBank.bus_account">
        <el-descriptions-item label="企业名称">{{ nowBank.bus_account.name }}</el-descriptions-item>
        <el-descriptions-item label="法人">{{ nowBank.bus_account.legal_person }}</el-descriptions-item>
        <el-descriptions-item label="法人手机号" :span="2">{{ nowBank.bus_account.legal_mp }}</el-descriptions-item>
        <el-descriptions-item label="开户状态">
          <el-tag size="small">{{ nowBank.bus_account.reason }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="统一社会信用码">{{ nowBank.bus_account.social_credit_code }}</el-descriptions-item>
        <el-descriptions-item label="企业地址">{{ nowBank.bus_account.address }}</el-descriptions-item>
      </el-descriptions>
      <el-empty v-else description="无企业信息"></el-empty>
      <el-divider></el-divider>
      <el-descriptions title="企业账户信息" direction="vertical" :column="4" border v-if="nowBank.bus_account">
        <el-descriptions-item label="户名">{{ nowBank.bus_account.card_name }}</el-descriptions-item>
        <el-descriptions-item label="银行">{{ nowBank.bus_account.bank_name }}</el-descriptions-item>
        <el-descriptions-item label="卡号" :span="2">{{ nowBank.bus_account.card_no }}</el-descriptions-item>
        <el-descriptions-item label="结算账户状态">
          <el-tag size="small" v-if="nowBank.bus_account.account_id">{{ nowBank.bus_account.account_id }}</el-tag>
          <el-tag size="small" v-else>暂无结算账户</el-tag>
        </el-descriptions-item>
      </el-descriptions>
      <el-empty v-else description="无企业账户信息"></el-empty>
    </el-drawer>
  </div>
</template>

<script>
import {getList, create, del, all, changeStatus, getBankInfo,updateDevice} from '@/api/distributors'
// import { getMenus } from '@/api/menu'
import Pagination from '@/components/Pagination'
import store from '@/store'
import router from '@/router' // Secondary package based on el-pagination
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'
import cityData from '@/assets/pca-code.json'

export default {
  name: 'DistributorsList',
  components: {Pagination, ImageCropper, PanThumb},
  computed: {
    // contentShortLength() {
    //   return this.temp.introduction.length
    // },
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      imagecropperShow: false,
      imagecropperKey: 0,
      menus: [],
      roles: [],
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        keyword: '',
        // areas:'',
        parent_id: '',
        is_active: '',
        big: '',
        less: ''
      },
      info: [],
      selectAreas: '',
      selectParent: '',
      imageUrl: '',
      temp: {
        id: undefined,
        service_image: '',
        parent_id: '',
        // areas: '',
        name: '',
        draw_active: 0,
        draw_space: 0,
        owner_name: '',
        phone: '',
        rate: 50,
        settlement_type: 'no',
        is_active: 1,
        introduction: '',
        password: '',
        customer_service_phone: '',
        province_name: '',
        city_name: '',
        area_name: '',
        address: '',
        avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_360_360%2F0e%2F8c%2F40%2F0e8c40806fad44e4815f768df67dcb14.jpeg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640851251&t=e6589d08f1d4d9ad125ee07d8b18cb2b',
        remark: ''
      },
      bankVisible: false,
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '创建'
      },
      filterText: '',
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      rules: {
        name: [{required: true, message: '经销商名称不能为空', trigger: 'blur'}],
        owner_name: [{required: true, message: '负责人不能为空', trigger: 'blur'}],
        phone: [{required: true, message: '负责人手机号不能为空', trigger: 'blur'}]
      },
      addr: [],
      nowBank: [],
      options: cityData,
      distributorsList: [],
      nowDistributor: '',
      disOptions: [],
      cityProps: {
        value: 'code',   // 指定选项的 值 为选项对象的某个属性值
        label: 'name',   // 指定选项 标签 为选项对象的某个属性值
        children: 'children'    //指定选项的 子选项 为选项对象的某个属性值
      },
      colors: [
        {color: '#f56c6c', percentage: 20},
        {color: '#e6a23c', percentage: 40},
        {color: '#5cb87a', percentage: 60},
        {color: '#1989fa', percentage: 80},
        {color: '#6f7ad3', percentage: 100}
      ],
      distributorsProps: {
        value: 'id',
        label: 'name',
        children: 'children',
        checkStrictly: true
      },
      selectCityProps: {
        value: 'code',   // 指定选项的 值 为选项对象的某个属性值
        label: 'name',   // 指定选项 标签 为选项对象的某个属性值
        children: 'children',    //指定选项的 子选项 为选项对象的某个属性值
        checkStrictly: true
      },
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    let keyword = this.$route.query.keyword
    if (keyword) {
      this.listQuery.keyword = keyword
    }
    this.getList()
    this.getSelector()
  },
  methods: {
    getBankInfo(row) {
      getBankInfo(row.id).then(response => {
        if (response.code == 200) {
          this.bankVisible = true
          this.nowBank = response.data
          this.nowBank.now_name = row.name
        } else {
          this.$message.info(response.msg);
        }
      })
    },
    handleAvatarSuccess(res, file) {
      if (res.code == 200) {
        this.imageUrl = res.data.url
        this.temp.service_image = res.data.url
        this.$notify({
          title: '消息',
          type: 'success',
          // this.imageUrl = URL.createObjectURL(file.raw);
          message: '上传成功',
          duration: 2000
        });
      } else {
        this.$notify({
          title: '消息',
          type: 'error',
          message: '上传失败',
          duration: 2000
        });
      }
      // this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isJPG && !isPNG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!');
      }
      if (!isLt10M) {
        this.$message.error('上传图片大小不能超过 10MB!');
      }
      return isLt10M
      //  return isJPG && isLt2M;
    },
    changeStatus(val, id) {
      changeStatus(val, id).then(response => {
        this.$notify.success({
          title: '消息提示',
          message: response.msg,
          offset: 100
        })
        this.getList()
      })
    },
    getSelector() {
      all().then(response => {
        this.distributorsList = response.data
      })
    },
    increase() {
      this.temp.rate += 5;
      if (this.temp.rate > 100) {
        this.temp.rate = 100;
      }
    },
    decrease() {
      this.temp.rate -= 5;
      if (this.temp.rate < 0) {
        this.temp.rate = 0;
      }
    },
    handleAddrChange(e) {
      // 获取当前选中节点的数组
      let addrNode = this.$refs['cascaderAddr'].getCheckedNodes()[0]
      let addrText = addrNode.pathLabels
      this.temp.province_name = addrText[0]
      this.temp.city_name = addrText[1]
      this.temp.area_name = addrText[2]
    },
    handleDistributorsChange(e) {

    },
    cropSuccess(resData) {
      this.imagecropperShow = false
      this.imagecropperKey = this.imagecropperKey + 1
      this.temp.avatar = resData.url
    },
    close() {
      this.imagecropperShow = false
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    updateDevice() {
      updateDevice().then(response => {
        if (response.code == 200) {
          this.$notify.success({
            title: '成功',
            message: response.msg,
            type: 'success',
            duration: 2000
          })
        }
      })
    },
    getList() {
      // if(this.selectAreas && this.selectAreas.length > 0 ){
      //   this.listQuery.areas = JSON.stringify(this.selectAreas)
      // }else{
      //   this.listQuery.areas = ''
      // }
      if (this.selectParent && this.selectParent.length > 0) {
        this.listQuery.parent_id = JSON.stringify(this.selectParent)
      } else {
        this.listQuery.parent_id = ''
      }
      this.listLoading = true
      getList(this.listQuery).then(response => {
        this.list = response.data.list
        this.total = response.data.total
        this.listLoading = false
        this.info = response.data.info
      })
    },
    resetForm() {
      this.dialogFormVisible = false
    },
    handleCreate() {
      this.resetTemp()
      this.getSelector()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          if (this.temp.draw_active == 1 && this.temp.draw_space <= 0) {
            return this.$message.error('开启延时需完善延时间隔')
          }
          create(this.temp).then(response => {
            // this.list.unshift(this.temp)
            this.dialogFormVisible = false
            if (response.code == 200) {
              this.$notify.success({
                title: '成功',
                message: response.msg,
                type: 'success',
                duration: 2000
              })
              this.resetTemp()
              this.getList()
            } else {
              this.$notify.error({
                title: '失败',
                message: response.msg,
                duration: 2000
              })
            }
          })
        }
      })
    },
    handleUpdate(row) {
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.getSelector()
      this.imageUrl = row.service_image
      this.temp = Object.assign({}, row) // copy obj
      // this.temp.areas = [row.province_id+'',row.city_id+'',row.area_id+'']
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    del(id) {
      this.$confirm('确认要删除该条数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del(id).then(response => {
          // this.list.unshift(this.temp)
          if (response.code == 200) {
            this.$notify.success({
              title: '成功',
              message: response.msg,
              type: 'success',
              duration: 2000
            })
            this.resetTemp()
            this.getList()
          } else {
            this.$notify.error({
              title: '失败',
              message: response.msg,
              duration: 2000
            })
          }
        })
      }).catch(() => {

      })
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        parent_id: '',
        service_image: '',
        // areas:'',
        name: '',
        draw_active: 0,
        draw_space: 0,
        owner_name: '',
        phone: '',
        rate: 50,
        settlement_type: 'no',
        is_active: 1,
        introduction: '',
        password: '',
        customer_service_phone: '',
        province_name: '',
        city_name: '',
        area_name: '',
        address: '',
        remark: '',
        avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_360_360%2F0e%2F8c%2F40%2F0e8c40806fad44e4815f768df67dcb14.jpeg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640851251&t=e6589d08f1d4d9ad125ee07d8b18cb2b'
      }
    }
  }
}
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}

.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
<style scoped>
.avatar {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}
</style>
<style lang="scss" scoped>
@import "~@/styles/mixin.scss";

.createPost-container {
  position: relative;

  .createPost-main-container {
    padding: 40px 45px 20px 50px;

    .postInfo-container {
      position: relative;
      @include clearfix;
      margin-bottom: 10px;

      .postInfo-container-item {
        float: left;
      }
    }
  }

  .word-counter {
    width: 40px;
    position: absolute;
    right: 10px;
    top: 0px;
  }
}

.article-textarea ::v-deep {
  textarea {
    padding-right: 40px;
    resize: none;
    border: none;
    border-radius: 0px;
    border-bottom: 1px solid #bfcbd9;
  }
}
</style>
